<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script>
      // ES5 --->ES6（ECMAScript2015）ES7 ES8 ES9 ...ES11;
      // 一.let 声明变量；
      // var a = 10;
      // let b = 20;
      // console.log(a,b);
      // 区别：1.let 没有声明前置；

      // console.log(a);
      // var a = 10;
      // 暂时性死区
      // let a = 10;
      // console.log(a);

      // 2.let 拥有块级作用域；只会在块级作用域内有效果；
      // 1全局作用域  2局部作用域（函数作用域） 3.块级作用域 ；
      // 块级作用域 使用 通过 "{}"定义；
      // {
      //     // 块级作用域；
      //     // var a = 10;
      //     // console.log(a);
      //     let a = 20;
      //     console.log(a);

      // }

      // console.log(a)

      // 3.let 不能重复声明 ；
      // var a = 10;
      // var a = 20;
      // console.log(a);

      // let a = 10;
      // let a = 20;
      // console.log(a);

      // 4.let 不会挂载在window上
      // var a = 10;
      // var b = 20;

      // let a = 10;
      // let b = 20;
      // console.log(window.a);
      // console.log(window.b);

      // var i = 0;
      // var i = 1;
      // {
      //     let i = 0;
      // }

      // {

      //     let i = 1;
      // }
      //for循环 （）是父级作用域  循环一次{执行代码段}生成一次子级作用域 一对花括号就是一个独立作用域
      for (let i = 0; i < 4; i++) {
        setTimeout(function () {
          console.log(i);
        }, 1000);
      }

      for (var i = 0; i < 4; i++) {
        (function (i) {
          setTimeout(function () {
            console.log(i);
          }, 1000);
        })(i);
      }
    </script>
  </body>
</html>
